<template>
	<popup ref="popup" :loading="popupLoading">
		<div slot="body">
			<el-form class="dataForm" ref="form" :disabled="disabled" :model="formParameter" :inline="true" label-width="100px" :rules="rules">
					<el-row>
						<el-col :span="24">
							<el-form-item label="供应商" prop="supId">
                <el-select v-model="formParameter.supId" placeholder="请选择供应商">
                  <el-option
                      v-for="item in supplierList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="设备名称" prop="name"><el-input v-model="formParameter.name" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="设备类别" prop="category">
                <select-option-dictionary v-model="formParameter.category" dkey="equipment-type" :multiple="false" :stringMode="true"></select-option-dictionary>
              </el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="设备品牌" prop="brand"><el-input v-model="formParameter.brand" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="设备规格/型号" prop="model"><el-input v-model="formParameter.model" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="参考数据"><el-input v-model="formParameter.referenceData" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="生产厂家"><el-input v-model="formParameter.manufacturer" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="租金" prop="rent"><el-input v-model="formParameter.rent" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="人工" prop="laborPrice"><el-input v-model="formParameter.laborPrice" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="油费" prop="oilCost"><el-input v-model="formParameter.oilCost" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="维修" prop="repair"><el-input v-model="formParameter.repair" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
<!--					<el-row>-->
<!--						<el-col :span="24">-->
<!--							<el-form-item label="价格" prop="price"><el-input v-model="formParameter.price" autocomplete="off"></el-input></el-form-item>-->
<!--						</el-col>-->
<!--					</el-row>-->
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注" ><el-input v-model="formParameter.remarks" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
			</el-form>
		</div>
		<div slot="footer">
			<el-button v-if="!disabled" type="primary" :loading="confirmLoading" @click="confirm()">确 定</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</popup>
</template>

<script>
import popup from '@/components/popup/drawerPopup.vue';
import api from '@/api/supplier/equipment/equipment.js';
import supApi from '@/api/supplier/supplier/supplier.js';
import selectOptionDictionary from '@/components/biz/selectOptionDictionary/selectOptionDictionary.vue';

export default {
	name: 'edit',
	components: {
			popup,
      selectOptionDictionary
		},
	data() {
		return {
			disabled: false,
			popupLoading: false,
			confirmLoading: false,
			parameter: {},
			formParameter: {},
      supplierList:{},
			rules: {
						//供应商id
						supId: [
							{
								validator: this.$validate.required,
								trigger: 'change'
							},
							{
								validator: this.$validate.length,
								max: 32,
								trigger: 'change'
							}
						],
						//设备名称
						name: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 25,
								trigger: 'blur'
							}
						],
						//设备类别
						category: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 9,
								trigger: 'blur'
							}
						],
						//设备品牌
						brand: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 50,
								trigger: 'blur'
							}
						],
						//设备规格/型号
						model: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 50,
								trigger: 'blur'
							}
						],
						//参考数据
						referenceData: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 50,
								trigger: 'blur'
							}
						],
						//生产厂家
						manufacturer: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 50,
								trigger: 'blur'
							}
						],
						//租金
						rent: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							}
						],
						//人工
						laborPrice: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							}
						],
						//油费
						oilCost: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							}
						],
						//维修
						repair: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							}
						],
						//价格
						price: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 11,
								trigger: 'blur'
							}
						],
						//备注
						remarks: [
							{
								validator: this.$validate.required,
								trigger: 'blur'
							},
							{
								validator: this.$validate.length,
								max: 255,
								trigger: 'blur'
							}
						],
			}
		};
	},
	methods: {
			//打开弹框
			open(parameter, title, disabled, size) {
				this.parameter = parameter;
				this.disabled = disabled;
				this.$refs.popup.open(title, size);
        this.getSupplierList()
				this.$nextTick(() => {
					this.init();
				})
			},
			//关闭弹框
			close() {
				this.disabled = false;
				this.$refs.popup.close();
			},
			//提交表单
			confirm() {
				this.$utils.checkForm(this.$refs.form, () => {

					this.confirmLoading = true;

          this.formParameter.price = parseFloat(this.formParameter.rent) + parseFloat(this.formParameter.laborPrice) + parseFloat(this.formParameter.oilCost) + parseFloat(this.formParameter.repair)

					if (!this.parameter.id) {
						//添加
						let parameter = this.$utils.merger(this.formParameter);
						api.save(parameter,
							response => {
								this.$utils.msg.success(response.msg);
								this.confirmLoading = false;
								this.close();
								this.$parent.list();
							},
							response => {
								this.$utils.msg.warning(response.msg);
								this.confirmLoading = false;
							}
						);
					} else {
						//编辑
						let parameter = this.$utils.merger(this.formParameter);
						api.update(parameter,
							response => {
								this.$utils.msg.success(response.msg);
								this.confirmLoading = false;
								this.close();
								this.$parent.list();
							},
							response => {
								this.$utils.msg.warning(response.msg);
								this.confirmLoading = false;
							}
						);
					}
				});
			},
			init() {
				this.popupLoading = true;
				//清除等待
				this.confirmLoading = false;
				//清空内容
				this.formParameter = {};
				//清楚校验
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        })

				if (this.parameter.id) {
					//编辑查询数据
					let parameter = {
						id: this.parameter.id
					};
					api.toUpdate(parameter, response => {
						this.formParameter = response.data;
						this.popupLoading = false;
					});
				} else {
					//添加
					this.popupLoading = false;
				}
			},
      getSupplierList(){
        this.listLoading = true;
        let params = '';
        supApi.list(params, response => {
          this.supplierList = response.data.records;
          this.listLoading = false;
        })
      },

		}
	};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
	@import '~common/custom/css/popup/popup.scss';
</style>
